<template>
  <div class="app-container">
    <div ref="action-container" class="action-container">
      <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
        <el-form-item label="名称" prop="name">
          <el-input v-model="queryParams.name" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新建</el-button>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(selectedList.map(item => item.id).join(','))">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table
        v-if="tableHeight"
        v-loading="loading"
        :data="list"
        border
        :height="tableHeight"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="appid"
          label="小程序id"
          width="180"
        />
        <el-table-column
          prop="name"
          label="名称"
          width="180"
        />
        <el-table-column
          prop="create_date"
          label="创建时间"
          width="180"
        />
        <el-table-column
          prop="status"
          label="开启状态"
          width="180"
        >
          <template slot-scope="scope">
            <el-switch
              v-if="scope.row.status"
              v-model="scope.row.status"
              active-value="1"
              inactive-value="2"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="真实"
              inactive-text="套壳"
              @change="statusChange($event, scope.row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="memo"
          label="备注"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="220"
        >
          <template slot-scope="scope">
            <el-button v-if="!scope.row.info" size="mini" type="primary" @click="handleInit(scope.row)">初始化</el-button>
            <el-button v-if="scope.row.info" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.info" size="mini" type="primary" @click="handleInfo(scope.row)">详情</el-button>
            <el-button v-if="scope.row.info" type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div ref="pagination-container" class="pagination-container">
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </div>
    <div class="extra-container">
      <el-dialog :close-on-click-modal="false" width="500px" :visible.sync="showDialog" :title="form.id ? '更新': '添加'" :destroy-on-close="true" @close="handleCloseDialog">
        <el-form ref="ruleForm" size="small" :model="form" :rules="rules" label-width="100px">
          <!--          <el-form-item label="图片" prop="img">-->
          <!--            <el-upload-->
          <!--              ref="upload"-->
          <!--              :action="upload.url"-->
          <!--              :headers="upload.headers"-->
          <!--              :on-remove="handleRemove"-->
          <!--              :on-success="handleOnSuccess"-->
          <!--              :on-preview="handlePreview"-->
          <!--              :file-list="upload.fileList"-->
          <!--              list-type="picture-card"-->
          <!--            >-->
          <!--              <i class="el-icon-plus" />-->
          <!--            </el-upload>-->
          <!--          </el-form-item>-->
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
          <!--          <el-form-item label="价格" prop="price">-->
          <!--            <el-input-number v-model="form.price" default-v :precision="2" :step="1" :max="999" />-->
          <!--          </el-form-item>-->
          <el-form-item label="备注" prop="memo">
            <el-input v-model="form.memo" type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
          <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
        </template>
      </el-dialog>
      <el-dialog title="预览" :destroy-on-close="true" :visible.sync="previewVisible">
        <img width="100%" :src="previewUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import * as goodsApi from '@/api/estate'
import { mixins } from '@/mixins'
import { mapGetters } from 'vuex'
export default {
  mixins: [mixins],
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  data() {
    return {
      imgPrefix: process.env.VUE_APP_DOMAIN,
      previewUrl: '',
      previewVisible: false,
      upload: {
        open: false,
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_UPLOAD_API + '/upload',
        // 上传的文件列表
        fileList: []
      },
      showDialog: false,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        name: ''
      },
      form: {},
      rules: {
        name: [
          { max: 30, message: '长度在30个字符以内', trigger: 'blur' }
        ],
        memo: [{ max: 150, message: '长度在150个字符以内', trigger: 'blur' }]
      },
      list: [],
      selectedList: [],
      total: 0,
      formTrue: {
        a1: '您的个人风险报告生成中',
        a2: '您的个人风险报告生成中',
        a3: '立即了解',
        // 首页
        v1: '个人征信官方查询渠道',
        v2: '包含以下三种渠道查询',
        v3: '网上查询',
        v4: '电子版个人信用报告（简版）',
        v5: '银行柜台查询',
        v6: '纸质版个人信用报告（详版）',
        t1: '本人可持有效身份证件原价到中国人民银行市级分行营业管理部征信服务大厅及所辖支行征信查询柜台办理每年有2次免费查询机会，超过次数每次收取10元服务费。',
        v7: '自助机查询',
        v8: '纸质版个人信用报告（详版）',
        t2: '信用报告查询服务网点自助机，每年同样可免费查询2次。超过2次的，需要到征信查询柜台申请查询，并收取服务费10元/次。',
        img1: 'storage/upload/20230809/dd2236dccc98c20757968debbf393038.png',
        v9: 'https://manage.whha999.com/query/#/Home2?cid=112&templateId=2',
        // 网上查询
        b1: '请选择网上查询渠道',
        b2: '个人征信网上查询包含以下3种查询渠道',
        b3: '人行征信中心官网',
        b4: '银行网银',
        b5: '手机银行APP',
        b6: '*网上查询渠道只能查询您本人的电子版信用报告。请您注意，切勿将信用报告提供给他人或其他机构。',
        // 人行征信中心官网
        c1: '人行征信中心官网地址',
        c2: 'https://ipcrs.pbccrc.org.cn/',
        c3: '复制网址',
        c4: '您可以在电脑端浏览器内打开以上网址链接,注册并登录“个人信用信息服务平台”后即查询个人信用报告。',
        c5: '*页面信息仅供参考',
        // 银行网银
        d1: '以下网银银行可查询征信',
        d2: '通过网银查询征信需在电脑端登录',
        d3: '复制网址',
        d4: '工商银行网银',
        d5: 'http://www.icbc.com.cn/icbc/',
        d6: '建设银行网银',
        d7: 'https://ibsbistar.ccb.com.cn/',
        d8: '招商银行网银',
        d9: 'https://www.cmbchina.com/',
        d10: '广发银行网银',
        d11: 'https://ebanks.cgbchina.com.cn/perbank/',
        d12: '浦发银行网银',
        d13: 'https://ebank.spdb.com.cn/msper-web-index/prelogin.do',
        d14: '中信银行网银',
        d15: 'https://i.bank.ecitic.com/',
        d16: '*页面信息仅供参考',
        // 手机银行APP
        e1: '以下手机银行APP可查询征信',
        e2: [{ name: '工商银行', img: '/pages/imgs/1.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"信用报告";', tip2: '首页点击"全部">查看"金融助手"分类>点击"信用报告"。' },
          { name: '建设银行', img: '/pages/imgs/2.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"金融助手"分类>点击"个人信用报告"。' },
          { name: '招商银行', img: '/pages/imgs/3.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"金融助手"分类>点击"个人信用报告"。' },
          { name: '中国银行', img: '/pages/imgs/4.png', tip1: '首页搜索框输入"征信"并搜索>点击"征信查询";', tip2: '首页点击"更多">查看"助手"分类>点击"征信查询"。' },
          { name: '浦发银行', img: '/pages/imgs/5.png', tip1: '首页搜索框输入"征信"并搜索>点击"征信查询";', tip2: '首页点击"更多">查看"生活权益"分类>点击"征信查询"。' },
          { name: '广发银行', img: '/pages/imgs/6.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"生活服务"分类>点击"个人信用报告"。' },
          { name: '交通银行', img: '/pages/imgs/7.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"特色服务"分类>点击"个人信用报告"。' },
          { name: '中信银行', img: '/pages/imgs/8.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"信用报告查询";', tip2: '首页点击"全部">查看"特色服务"分类>点击"信用报告查询"。' },
          { name: '光大银行', img: '/pages/imgs/9.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"城市服务">点击"个人信用报告"。' },
          { name: '平安银行', img: '/pages/imgs/10.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"信用报告";', tip2: '首页点击"更多">查看"贷款"分类>点击"信用报告"。' }],
        e3: '如何找到征信查询入口',
        e4: '*页面信息仅供参考'
      },
      formFake: {
        'id': 2,
        'a1': '你好',
        'a2': '欢迎访问',
        'a3': '立即了解',
        'v1': '了解更多信息',
        'v2': '包含以下三种渠道',
        'v3': '主营业务',
        'v4': '你好, 欢迎访问敏敏服装',
        'v5': '联系我们',
        'v6': '你好, 欢迎访问',
        't1': '请拨打电话153685941233',
        'v7': '咨询客服',
        'v8': '你好, 欢迎访问',
        't2': '请联系客服微信153685941233',
        img1: 'storage/upload/20230809/1223aacce3929c2754bf95fbe20ca8c9.jpg',
        'v9': 'https://manage.whha999.com/query/#/Home2?cid=112&templateId=2',
        'b1': '请选择需要了解的内容',
        'b2': '包含以下3种内容',
        'b3': '公司官网',
        'b4': '公司热卖商品列表',
        'b5': '公司热卖商品详情',
        'b6': '',
        'c1': '公司官网',
        'c2': 'www.baidu.com',
        'c3': '复制网址',
        'c4': '',
        'c5': '',
        'd1': '以下是我们的产品列表',
        'd2': '请访问pc网站获取更多详情',
        'd3': '复制网址',
        'd4': '产品1',
        'd5': 'www.baidu.com',
        'd6': '产品2',
        'd7': 'www.baidu.com',
        'd8': '产品3',
        'd9': 'www.baidu.com',
        'd10': '产品4',
        'd11': 'www.baidu.com',
        'd12': '产品5',
        'd13': 'www.baidu.com',
        'd14': '产品6',
        'd15': 'www.baidu.com',
        'd16': '',
        'e1': '以下手机银行APP可查询征信',
        'e2': [
          {
            'name': '产品1',
            'img': '/pages/imgs/1.gif',
            'tip1': '',
            'tip2': ''
          },
          {
            'name': '产品2',
            'img': '/pages/imgs/1.gif',
            'tip1': '',
            'tip2': ''
          },
          {
            'name': '产品3',
            'img': '/pages/imgs/1.gif',
            'tip1': '',
            'tip2': ''
          },
          {
            'name': '产品4',
            'img': '/pages/imgs/1.gif',
            'tip1': '',
            'tip2': ''
          },
          {
            'name': '产品5',
            'img': '/pages/imgs/1.gif',
            'tip1': '',
            'tip2': ''
          },
          {
            'name': '产品6',
            'img': '/pages/imgs/1.gif',
            'tip1': '',
            'tip2': ''
          },
          {
            'name': '产品7',
            'img': '/pages/imgs/1.gif',
            'tip1': '',
            'tip2': ''
          },
          {
            'name': '产品8',
            'img': '/pages/imgs/1.gif',
            'tip1': '',
            'tip2': ''
          },
          {
            'name': '产品9',
            'img': '/pages/imgs/1.gif',
            'tip1': '',
            'tip2': ''
          },
          {
            'name': '产品10',
            'img': '/pages/imgs/1.gif',
            'tip1': '',
            'tip2': ''
          }
        ],
        'e3': '详情',
        'e4': ''
      }
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    handleInfo(row) {
      this.$router.push({
        path: '/estate/index',
        query: {
          id: row.id
        }
      })
    },
    async handleInit(row) {
      this.loading = true
      await goodsApi.update({ id: row.id, info: JSON.stringify(this.formTrue), info2: JSON.stringify(this.formFake) })
      this.loading = false
      await this.handleQuery()
    },
    async statusChange(status, id) {
      this.loading = true
      await goodsApi.update({ id, status })
      this.loading = false
    },
    handlePreview(file) {
      this.previewUrl = file.url
      this.previewVisible = true
    },
    handleRemove(file, fileList) {
      this.upload.fileList = fileList
    },
    handleOnSuccess(response, file, fileList) {
      this.upload.fileList = fileList
    },
    handleCreate() {
      this.form = {}
      this.showDialog = true
    },
    handleCloseDialog() {
      this.upload.fileList = []
      this.showDialog = false
    },
    handleUpdate(row) {
      this.form = { ...row }
      if (row.img) {
        const imgs = row.img.split(',')
        this.upload.fileList = imgs.map(item => ({ url: process.env.VUE_APP_DOMAIN + item, name: item, response: { data: { path: item }}}))
      }
      this.showDialog = true
    },
    handleSelectionChange(rows) {
      this.selectedList = rows
    },
    handleDelete(id) {
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goodsApi.del({ id: id }).then(() => {
          this.handleQuery()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
      })
    },
    async handleQuery() {
      this.loading = true
      try {
        const { data } = await goodsApi.getList(this.queryParams)
        this.list = data.data
        this.total = data.total
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 15,
        name: ''
      }
      this.handleQuery()
    },
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const data = { ...this.form }
          // data.img = this.upload.fileList.map(item => item.response.data.path).join(',')
          if (this.form.id) {
            await goodsApi.update(data)
          } else {
            await goodsApi.add(data)
          }
          this.handleQuery()
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.handleCloseDialog()
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .thumb{
    width: 100px;
    height: 100px;
    object-position: center;
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }
  ::v-deep .el-upload--picture-card{
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  ::v-deep {
    .el-upload-list--picture-card .el-upload-list__item{
      width: 100px;
      height: 100px;
      transition: unset;
    }
  }
  ::v-deep{
    .el-progress-circle{
      width: 100px!important;
      height: 100px!important;
    }
    .el-upload-list--picture-card .el-progress{
      width: 100px!important;
    }
  }
</style>

